<template>
  <div>
    <el-dialog title="作品列表" :visible.sync="visible">
      <!-- 列表相关区域 -->
      <el-table v-loading="pageLoading" :data="pageVO.list" border fit highlight-current-row style="width: 100%;">
        <el-table-column label="标题" align="center">
          <template slot-scope="{row}">
            <span>{{ row.workTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="简介" align="center">
          <template slot-scope="{row}">
            <span>{{ row.workDescr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="封面" align="center" width="220px">
          <template slot-scope="{row}">
            <img v-if="row.workCoverUrl || row.xworkCoverUrl"
              :src="row.workCoverUrl ? resourcesUrl+row.workCoverUrl : resourcesUrl+row.xworkCoverUrl" width="200" height="200" />
            <div v-else>无</div>
            <el-button type="primary" @click="changeimg(row)"
              style="margin-top: 5px;">
              更换封面
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="作品" align="center" width="500px">
          <template slot-scope="{row}">
            <div class="listss">
              <!-- <div v-if="row.workType == '图片'">
                <div v-for="(file, index) in row.workUrl.split(',')" :key="index">
                <div>
                  <img :src="file.startsWith('http') ? file : resourcesUrl + file" :alt="file" width="100" height="100" />
                </div>
              </div>
              </div>
              <div v-if="row.workType == '视频'">
                <div v-for="(file, index) in row.workUrl.split(',')" :key="index">
                <div>
                  <video v-if="row.workType == '视频'" :src="file.startsWith('http') ? file : resourcesUrl + file" :controls="true" width="320" height="200"></video>
                </div>
              </div>
              </div> -->
                <div>
                  <video :src="row.workUrl.startsWith('http') ? row.workUrl : resourcesUrl + row.workUrl" :controls="true" width="320" height="200"></video>
                </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="pageVO.total > 0" :total="pageVO.total" :page.sync="pageQuery.pageNum"
        :limit.sync="pageQuery.pageSize" @pagination="getPage()" />




    </el-dialog>
    <el-dialog title="更换封面" :visible.sync="visiblezz" :show-close="false">
      <el-form v-loading="pageLoading" element-loading-text="上传中..." ref="dataForm" :model="dataForm"
        label-position="right" label-width="80px">
        <el-form-item label="封面方向">
          <el-radio v-model="aaa" label="纵向封面">纵向封面</el-radio>
          <el-radio v-model="aaa" label="横向封面">横向封面</el-radio>
        </el-form-item>
        <!-- 纵向作品封面 -->
        <div>
          <div class="btn" v-if="aaa == '纵向封面'">
            <el-button type="primary" icon="el-icon-upload" @click="chooseImagez">选择纵向封面</el-button>
            <input type="file" ref="imageInputz" accept="image/*" style="display: none" @change="handleImageUploadz" />
          </div>
          <div class="btn" v-if="aaa == '横向封面'">
            <el-button type="primary" icon="el-icon-upload" @click="chooseImagew">选择横向封面</el-button>
            <input type="file" ref="imageInputw" accept="image/*" style="display: none" @change="handleImageUploadw" />
          </div>
        </div>
        <div class="imgvideo">
          <div class="listss" v-if="aaa == '纵向封面'">
            <img v-if="imageUrlzurl" :src="imageUrlzurl" :alt="imageUrlzurl" width="200" height="200" />
          </div>
          <div class="listss" v-if="aaa == '横向封面'">
            <img v-if="imageUrlwurl" :src="imageUrlwurl" :alt="imageUrlwurl" width="200" height="100" />
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancella()">
          取消
        </el-button>
        <el-button type="primary" @click="dataFormSubmita()">
          确定
        </el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/multishop/shop-user'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      pageLoading: false,
      imageUrlzurl: '',
      imageUrlwurl: '',
      dataForm: {
        xworkCoverUrl:null,
        workCoverUrl:null
      },
      aaa: '',
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      visible: false,
      visiblezz: false,
      pageLoading: true,
      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0 // 一共多少页
      },
      pageQuery: {
        userId: '',
        pageSize: 5,
        pageNum: 1,
        pageType:0

      },
    }
  },
  methods: {
    changeimg(row) {
      this.visiblezz = true
      console.log(row)
      this.dataForm.workId = row.workId
      console.log(this.dataForm.workId)
    },
    cancella() {
      this.visiblezz = false
      this.imageUrlzurl= null
      this.imageUrlwurl= null
    },
    // 表单提交
    dataFormSubmita() {
      if(this.dataForm.workCoverUrl){
        this.dataForm.xworkCoverUrl = null
      }
      api.zpupdate(this.dataForm).then(res => {
        console.log('asdasd')
        console.log(res)
        console.log('asdasd')
        this.getPage()
        this.visiblezz = false
        this.dataForm = {}
        this.imageUrlzurl= null
        this.imageUrlwurl= null
      })
    },
    chooseImagez() {
      const imageInputz = this.$refs.imageInputz;
      imageInputz.click();
    },
    handleImageUploadz(event) {
      // 获取上传的文件
      const file = event.target.files[0];
      // 创建一个 URL 对象来获取图片地址
      this.imageUrlzurl = URL.createObjectURL(file);
      const zdata = new FormData()
      zdata.append('file', file);
      api.upload_minio(zdata).then(pageVO => {
        console.log('zzzzzzzzzzzdata')
        console.log(pageVO)
        this.dataForm.workCoverUrl = pageVO.showUrls[0]

        console.log('zzzzzzzzzzzdata')
      })
    },
    chooseImagew() {
      const imageInputw = this.$refs.imageInputw;
      imageInputw.click();
    },
    handleImageUploadw(event) {
      // 获取上传的文件
      const file = event.target.files[0];
      // 创建一个 URL 对象来获取图片地址
      this.imageUrlwurl = URL.createObjectURL(file);
      const wdata = new FormData()
      wdata.append('file', file);
      api.upload_minio(wdata).then(pageVO => {
        console.log('zzzzzzzzzzzdata')
        console.log(pageVO)
        this.dataForm.xworkCoverUrl = pageVO.showUrls[0]
        console.log('zzzzzzzzzzzdata')
      })
    },
    init(userId) {
      this.visible = true
      this.pageQuery.userId = userId
      this.$nextTick(() => {
        this.pageLoading = true
        api.zplist({ ...this.pageQuery }).then(data => {
          console.log(data)
          this.pageVO = data
          this.pageLoading = false

        })
      })
    },
    getPage() {
      this.pageLoading = true
      api.zplist({ ...this.pageQuery }).then(data => {
        console.log(data)
        this.pageVO = data
        this.pageLoading = false

      })
    },
  }
}
</script>
<style scoped>
.listss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>
